<template>
	<view style=" padding: 0rpx 15rpx;">

		<u-row customStyle="margin-bottom: 10px">
			<u-col span="4">
				<view style="width: 100%; height: 280rpx;margin-top: 20px;
				background:url(../../static/park.png) no-repeat;
				background-size: 90%;
				"></view>
			</u-col>
			<u-col span="8">
				<view>
					<p style=" color: #888; font-size: 40rpx;">长沙开福寺停车收费场</p>

					<label style=" font-size: 60rpx;">{{model.vehicleNo}}</label>

				</view>
			</u-col>
		</u-row>

		<view>

		</view>

		<view>
			<u-cell-group>
				<u-cell title="订单号" :value="model.id" :isLink="true"></u-cell>
					
				<u-cell title="入场时间">
					<label slot="value" class="u-slot-value">{{model.createTime}} <text
							style="display: none; background-color: rgb(17,70,131) ; color: white;padding: 0 10rpx;border-radius: 8rpx;margin-left: 10rpx;">图片</text>

					</label>

				</u-cell>
				<!-- <u-cell title="离场时间" value="未离厂"></u-cell> -->

				<!-- 			<u-cell title="收费金额" value="300 元"></u-cell>
			<u-cell title="已收金额" value="0 元"></u-cell> -->
				<u-cell title="收费金额" :value="model.chargeInfo.actualMoney+'元'"></u-cell>
				<u-cell title="支付状态" :value="(model.chargeInfo.status==0?'未支付':'已支付')">
					  <view slot='value'>
						<label class="tag pay" v-show='model.chargeInfo.status==10'>已支付</label>
						<label class="tag nopay" v-show='model.chargeInfo.status!=10'>未支付</label>
						  
					  </view>
					
					
					
				</u-cell>
				<u-cell title="联系人" :value="model.driverName" :isLink="true"></u-cell>
					<u-cell title="联系电话" :value="model.phoneNum" :isLink="true"></u-cell>
				<u-cell title='进场图片'>
					<view slot="value" class="u-slot-value">
						<u-album :urls="urls"></u-album>
					</view>

				</u-cell>

			</u-cell-group>
			<u-gap height="50" bgColor="#fff"></u-gap>
<!-- 			<view style="height: 150px;width:100%">



			</view> -->
			<view class="button-group">
				<view class="u-demo-block__content">
					<view class="u-page__button-item" v-show='model.chargeInfo.status!=10'>
					<u-button
					    text="调整金额"
					    size="normal"
					    type="info"
						@click="toChangeMoneyPost"
					></u-button>
				</view>
				<u-gap height="10" bgColor="#fff"></u-gap>
				
					<view class="u-page__button-item" v-show='model.chargeInfo.status!=10'>
						<u-button @click='toPayPost' text="完成支付" size="normal" type="success"></u-button>
					</view>
					<u-gap height="10" bgColor="#fff"></u-gap>
					<view class="u-page__button-item">
						<u-button @click='back' text="返回" size="normal"></u-button>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>
<style>
	.tag {
		display: inline-block;
		padding: 1rpx 10rpx;
		border-radius: 10rpx;
	}
	
	.nopay {
		background-color: orange;
		color: white;
	}
	
	.pay {
		background-color: #5ac725;
		color: white;
	}
	
</style>
<script>
	import service from '@/util/service.js'

	export default {
		data() {
			return {
				model: {

				},
				urls: []
			}
		},
		onLoad: function(option) {
			if (option.id) {
				this.getDetail(option.id);
			}
		},
		methods: {
			toPayPost:function(){
				var that=this;
				uni.showModal({
					title:"系统提示",
					content:"确定已经完成收费？",
					success:function(res){
						if(res.confirm){
							var postModel=JSON.parse( JSON.stringify(that.model));
							postModel.chargeInfo.status=10;//表示已支付
						
							//postModel.chargeInfo.actualMoney=parseInt( res.content);//表示已支付
							
							
							uni.showLoading({
								title:"提交中.."
							})
							service.putJson("/biz/entrance/update",postModel,function(res1){
								uni.hideLoading();
								if (res1.code == 1) {
									that.getDetail(postModel.id);
								} else {
									uni.showModal({
										title: "系统提示",
										content: res1.msg
									})
								
								}
								
							})
							
						}
					}
				})
				
			},
			toChangeMoneyPost:function(){
				var that=this;
				uni.showModal({
					editable:true,//是否显示输入框

					title:"可调整收费金额,点击确定完成收费",
					content:""+that.model.chargeInfo.actualMoney,
					success:function(res){
						if(res.confirm){
							var postModel=JSON.parse( JSON.stringify(that.model));
							//postModel.chargeInfo.status=10;//表示已支付
							if(!Number.isInteger(parseInt( res.content))){
						console.log(res.content);
								uni.showModal({
									title: "系统提示",
									content: "请输入正确的缴费金额！",
									showCancel:false
								})
								return;
								
							}
							postModel.chargeInfo.actualMoney=parseInt( res.content);//表示已支付
							
							
							uni.showLoading({
								title:"提交中.."
							})
							service.putJson("/biz/entrance/update",postModel,function(res1){
								uni.hideLoading();
								if (res1.code == 1) {
									that.getDetail(postModel.id);
								} else {
									uni.showModal({
										title: "系统提示",
										content: res1.msg
									})
								
								}
								
							})
							
						}
					}
				})
				
			},
			back: function() {
				uni.navigateBack();
			},
			getDetail: function(id) {
				var that = this;
				service.get('/biz/entrance/querybyid', {
					id: id
				}, function(res) {
					if (res) {
						that.model = res;
						console.log(res);
						var url = service.BASE_URL + res.picId;
						console.log(url);
						that.urls.push(url);

					}

				})

			},
			toPay: function() {
				uni.navigateTo({
					url: '/pages/orderPay/orderPay'
				})
			}
		}
	}
</script>

<style>

</style>